<template>
  <div class="menu-item">
    <van-icon name="browsing-history-o" class="menu-item-icon" />
    <span class="menu-item-text">垂直浏览</span>
  </div>
</template>

<script>
import Vue from "vue";
import { Icon } from "vant";

Vue.use(Icon);
export default {
    name: 'MenuItem',
    props: {
        data: {
          type: Object,
          require: true,
          default() {
            return {}
          }
        }
    }
}
</script>
<style lang="scss" scoped>
.menu-item {
  width: 100%;
  height: 200px;
  border-radius: 10px;
  background-color: #4158D0;
  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
  &-icon {
    font-size: 40px;
    color: #fff;
  }
}
</style>
